<template>
  <div id="index">
    <div>
      <div v-if="loading">Loading...</div>
      <div v-else class="host-body">
     <!-- 第一行 -->
        <header>
          <h1>平台大数据展示</h1>
          <div class="showTime">{{dateYear}} {{dateWeek}} {{dateDay}}</div>
        </header>
      </div>

      <div class="dashboard-editor-container">
        <el-row :gutter="32">
          <el-col :xs="24" :sm="24" :lg="8" :span="8" style="width: 30%;">
            <el-row>
              <div class="chart-wrapper">
                <pie-chart />
              </div>
            </el-row>
            <el-row>
              <div class="chart-wrapper">
                <bar-chart />
              </div>
            </el-row>
          </el-col>
          
          <el-col :xs="24" :sm="24" :lg="8" :span="8" style="width: 40%;">
            <div class="chart-wrapper">
              <ChinaMap />
            </div>
          </el-col>
          
          <el-col :xs="24" :sm="24" :lg="8" :span="8" style="width: 30%;">
            <el-row>
              <div class="chart-wrapper">
                <task-bar />
              </div>
            </el-row>
            <el-row>
              <div class="chart-wrapper">
                <ad-pie />
              </div>
            </el-row>
          </el-col>
        </el-row>
        <el-row :gutter="32">
          <el-col :xs="24" :sm="24" :lg="8" :span="8" style="width: 50%;">
            <!-- <panel-group-task @handleSetRankData="handleSetRankData"/> -->
            <!-- <TaskMultiRank :chart-data="RankData"/> -->
          </el-col>
          <el-col :xs="24" :sm="24" :lg="8" :span="8" style="width: 50%;">
            <panel-group @handleSetLineChartData="handleSetLineChartData" />
            <line-chart :chart-data="lineChartData" />
          </el-col>
          <el-col :xs="24" :sm="24" :lg="8" :span="8" style="width: 50%;">
            <TaskRank />
          </el-col>

        </el-row>
      </div>
    </div>
  </div>
    
</template>
  
<script>
  import PanelGroup from './components/PanelGroup.vue'
  // import PanelGroupTask from './components/PanelGroupTask.vue'
  import LineChart from './components/LineChart.vue'
  import PieChart from './components/PieChart.vue'
  import BarChart from './components/BarChart.vue'
  import TaskBar from './components/TaskBar.vue'
  import AdPie from './components/AdPie.vue'
  import ChinaMap from './components/ChinaMap.vue'
  import TaskRank from './components/TaskRank.vue'
  // import TaskMultiRank from './components/TaskMultiRank.vue'

  import { formatTime } from '@/utils'
  
  // const RankData = {

  // }

  const lineChartData = {
    register: {
      expectedData: [100, 120, 161, 134, 105, 160, 165],
      actualData: [120, 82, 91, 154, 162, 140, 145]
    },
    task: {
      expectedData: [200, 192, 120, 144, 160, 130, 140],
      actualData: [180, 160, 151, 106, 145, 150, 130]
    },
    income: {
      expectedData: [80, 100, 121, 104, 105, 90, 100],
      actualData: [120, 90, 100, 138, 142, 130, 130]
    },
    exchange: {
      expectedData: [130, 140, 141, 142, 145, 150, 160],
      actualData: [120, 82, 91, 154, 162, 140, 130]
    }
  }
  
  export default {
    name: 'DashboardAdmin',
    components: {
      AdPie,
      PieChart,
      BarChart,
      ChinaMap,
      TaskBar,
      TaskRank,
      PanelGroup,
      // PanelGroupTask,
      LineChart,
    },
    data() {
      return {
        lineChartData: lineChartData.register,
        loading:true,
        dateDay:null,
        dateYear:null,
        dateWeek:null,
        weekday:["周日","周一","周二","周三","周四","周五","周六"],
      }
    },
    mounted(){
      this.timeFn();
      this.cancelLoading();
    },
    methods: {
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      timeFn(){
        setInterval(()=>{
          this.dateDay=formatTime(new Date(),'HH:mm:ss');
          this.dateYear=formatTime(new Date(),'yyyy-MM-dd');
          this.dateWeek=this.weekday[new Date().getDay()];
        },1000)
      },
      cancelLoading(){
        setTimeout(()=>{
          this.loading=false;
        },500);
      }
    }
  }
</script>

<style lang="scss" scoped>
#index {
    color: #d3d6dd;
    padding: 5px;
    background: url('~@/assets/pageBg.png') no-repeat center center;
    background-size: cover;
  header{
    position: relative;
    height:3rem;
    background: url('~@/assets/titleBg.png') no-repeat center center;
    background-color: rgba(2,9,51,.3);
    background-size: 100% 100%;
    h1{
      font-size: 1.2rem;
      color: #fff;
      padding-top: 1rem;
      text-align: center;
      line-height: 1rem;
      font-family: '微软雅黑';
    }
    .showTime{
      position:absolute;
      right:3rem;
      top:0.5rem;
      line-height: 0.9375rem;
      color: rgba(255,255,255,.7);
      font-size: 0.75rem;
      font-family: '微软雅黑';
    }
  }
  .dashboard-editor-container {
      padding: 0.2rem 0.2rem 0 0.2rem;
  
    .chart-wrapper {
      // background: #020933;
      padding: 16px 16px 0;
      margin-bottom: 10px;
    }
  }
  
  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }}
</style> 